<ui:composition template="/WEB-INF/template_page.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:b="http://bootsfaces.net/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	
	<ui:define name="custom_css">
		<link href="#{request.contextPath}/css/profile.css" rel="stylesheet" />
		<link href="#{request.contextPath}/css/eventprofile.css" rel="stylesheet" />
	</ui:define>

	<ui:define name="title">
        MeteoCal - #{userViewBean.name}
    </ui:define>

	<ui:define name="content">
		<div class="col-md-10 col-md-offset-1">
		
			<div class=" #{userViewBean.isPublic ? 'col-md-4' : 'col-md-6 col-md-offset-3'}">
				<!-- Here goes the user info  -->
				<div class="row" align="center">
					<img class="profile-image img-circle" src="#{request.contextPath}#{userViewBean.avatar}" />
				</div>
	
				<br/>
				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title" align="center">#{userViewBean.name}</h3>
					</div>
					<div class="panel-body">
						<table class="table table-user-information" id="display">
							<tbody>
								<tr>
									<td>Email</td>
									<td><a href="mailto:info@support.com">#{userViewBean.email}</a></td>
								</tr>
								<tr>
									<td>Calendar</td>
									<td>#{userViewBean.visibilityCalendar}</td>
								</tr>
	
							</tbody>
						</table>
					</div>
				</div>
				<div align="center">
				</div>
			</div>
			
			<c:if test="#{userViewBean.isPublic}">
				<div class="col-md-8">
					
					<br /> <!-- events -->
					<div class="tabbable-panel">
						<div class="tabbable-line">
							<ul class="nav nav-tabs ">
								<li id="liNext" class="active">
									<a id="buttonNext" href="#next events" data-toggle="tab"> next events </a>
								</li>
								<li id="liMy">
									<a id="buttonMy" href="#myevents" data-toggle="tab"> my events </a>
								</li>
								<li id="liGoing">
									<a id="buttonGoing" href="#eventsgoing" data-toggle="tab"> events I'm going </a>
								</li>
							</ul>
							<div class="tab-content">
								<div id="divNext" class="tab-pane active">
		
									<div class="row">
										<div class="col-xs-12 col-sm-8">
											<ul class="event-list">
												<ui:repeat value="#{userViewBean.nextEvents}" var="item">
													<li>
														<time>
															<span class="day"><h:outputText value="#{item.day}" /></span>
															<span class="month"><h:outputText value="#{item.monthString}" /></span>
															<span class="year"><h:outputText value="#{item.year}" /></span>
															<span class="time"><h:outputText value="@ #{item.hour}:#{item.minute}" /></span>
														</time>
														<div class="info">
															<h2 class="title">
																<a href="#{request.contextPath}/user/event.xhtml?event=#{item.id}"><h:outputText value="#{item.name} @ #{item.location}" /></a>
															</h2>
															<p class="desc"><h:outputText value="#{item.description}" /></p>
															<br/>
															<p class="desc">This event organized by <h:outputText value="#{item.owner.firstName} #{item.owner.lastName}" /> is <h:outputText value="#{item.publicString}" /> and should take place <h:outputText value="#{item.outdoorString}" />.</p>
															
															<c:if test="#{item.hasForecast}">
																<p class="desc">The weather should be <h:outputText value="#{item.forecast.typeString}" /> with a probability of <h:outputText value="#{item.forecast.confidence}" /> / 16.</p>
															</c:if>
														</div>
													</li>
												</ui:repeat>
											</ul>
										</div>
									</div>
		
								</div>
								<div id="divMy" class="tab-pane">
		
									<div class="row">
										<div class="col-xs-12 col-sm-8 ">
											<ul class="event-list">
												<ui:repeat value="#{userViewBean.myEvents}" var="item">
													<li>
														<time>
															<span class="day"><h:outputText value="#{item.day}" /></span>
															<span class="month"><h:outputText value="#{item.monthString}" /></span>
															<span class="year"><h:outputText value="#{item.year}" /></span>
															<span class="time"><h:outputText value="@ #{item.hour}:#{item.minute}" /></span>
														</time>
														<div class="info">
															<h2 class="title">
																<a href="#{request.contextPath}/user/event.xhtml?event=#{item.id}"><h:outputText value="#{item.name} @ #{item.location}" /></a>
															</h2>
															<p class="desc"><h:outputText value="#{item.description}" /></p>
															<br/>
															<p class="desc">This event organized by <h:outputText value="#{item.owner.firstName} #{item.owner.lastName}" /> is <h:outputText value="#{item.publicString}" /> and should take place <h:outputText value="#{item.outdoorString}" />.</p>
															
															<c:if test="#{item.hasForecast}">
																<p class="desc">The weather should be <h:outputText value="#{item.forecast.typeString}" /> with a probability of <h:outputText value="#{item.forecast.confidence}" /> / 16.</p>
															</c:if>
														</div>
													</li>
												</ui:repeat>
											</ul>
										</div>
									</div>
		
								</div>
								<div id="divGoing" class="tab-pane">
		
									<div class="row">
										<div class="[ col-xs-12 col-sm-8 ]">
											<ul class="event-list">
												<ui:repeat value="#{userViewBean.acceptedEvents}" var="item">
													<li>
														<time>
															<span class="day"><h:outputText value="#{item.day}" /></span>
															<span class="month"><h:outputText value="#{item.monthString}" /></span>
															<span class="year"><h:outputText value="#{item.year}" /></span>
															<span class="time"><h:outputText value="@ #{item.hour}:#{item.minute}" /></span>
														</time>
														<div class="info">
															<h2 class="title">
																<a href="#{request.contextPath}/user/event.xhtml?event=#{item.id}"><h:outputText value="#{item.name} @ #{item.location}" /></a>
															</h2>
															<p class="desc"><h:outputText value="#{item.description}" /></p>
															<br/>
															<p class="desc">This event organized by <h:outputText value="#{item.owner.firstName} #{item.owner.lastName}" /> is <h:outputText value="#{item.publicString}" /> and should take place <h:outputText value="#{item.outdoorString}" />.</p>
															
															<c:if test="#{item.hasForecast}">
																<p class="desc">The weather should be <h:outputText value="#{item.forecast.typeString}" /> with a probability of <h:outputText value="#{item.forecast.confidence}" /> / 16.</p>
															</c:if>
														</div>
													</li>
												</ui:repeat>
											</ul>
										</div>
									</div>
		
								</div>
							</div>
						</div>
					</div>
				</div>
			</c:if>
		</div>
	</ui:define>
	
	<ui:define name="custom_js">
		<script src="#{request.contextPath}/js/profiletab.js"></script>
	</ui:define>
</ui:composition>